<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/business.js" th:src="@{/business.js}"></script>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/layui/css/modules/layer/default/layer.css" media="all">
<script src="../../static/layui/js/layui.js" th:src="@{/layui/js/layui.js}"></script>

<body>
<h2>
    <strong>
        <button style="float: left;">
            <a href="/">首页</a>
        </button>
        <button style="float: left; margin-left: 5px">
            <a href="/model-list.html">模型列表</a>
        </button>
        <button style="float: left; margin-left: 5px">
            <a href="/users-events-list">事件列表</a>
        </button>
    </strong>
</h2>
<hr>
<div>
    <table border="1" class="layui-table" lay-even="" lay-skin="nob">
        <tr>
            <td>序号</td>
            <td>创建人</td>
            <td>天数</td>
            <td>事件内容</td>
            <td>创建时间</td>
            <td>办结时间</td>
            <td>操作</td>
        </tr>
        <tr th:each="event,num:${eventList}">
            <td th:text="${num.count}">序号</td>
            <td th:text="${event.assigneeName}">创建人</td>
            <td th:text="${event.day}">天数</td>
            <td th:text="${event.content}">事件内容</td>
            <td th:text="${#dates.format(event.date, 'yyyy-MM-dd')}">创建时间</td>
            <td th:text="${#dates.format(event.finishTime, 'yyyy-MM-dd')}">创建时间</td>
            <td>
                <button th:id="${event.id}" onclick="openModak(this)">轨迹</button>
            </td>
        </tr>
        <button type="button" onclick="toSaveEventPage()">请假申请</button>
    </table>
</div>
<h2><strong>人员列表</strong></h2>
<div>
    <table border="1" class="layui-table" lay-even="" lay-skin="row">
        <tr>
            <td>序号</td>
            <td>人员</td>
            <td>创建时间</td>
            <td>人员ID</td>
            <td>操作</td>
        </tr>
        <tr th:each="user1,num:${user1List}">
            <td th:text="${num.count}">序号</td>
            <td th:text="${user1.name}">创建人</td>
            <td th:text="${#dates.format(user1.date, 'yyyy-MM-dd')}">创建时间</td>
            <td th:text="${user1.id}">人员ID</td>
            <td>
                <button th:value="${user1.id}" onclick="deleteUser(this)">删除</button>
            </td>
        </tr>
        <button onclick="toSaveUserPage()">新增人员</button>
    </table>
</div>
<!--模仿bootstrap的模态框-->
<div id="motaikunag" style="display: none; text-align:center">
    <div class="layui-row">
        <div class="layui-col-md9">审批</div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6" id="content">

        </div>
    </div>
</div>
<script>

    function openModak(data) {
        var content = $("#content");
        content.empty();
        layui.use(['layer'], function () {
            var layer = layui.layer, $ = layui.$;
            layer.open({
                type: 1,//类型
                area: ['1000px', '600px'],//定义宽和高
                title: '审批单',//题目
                shadeClose: false,//点击遮罩层关闭
                content: $('#motaikunag')//打开的内容
            });
        });
        content.append("<img src='/getImg?id="+data.id+"'/>");
    }
</script>
</body>
</html>
